<template>
  <div class="top">
    <div class="top__header">
      <span class="iconfont top__header__icon" @click="handleBack"
        >&#xe65e;</span
      >
      <span class="top__header__text">确认订单</span>
    </div>
    <div class="top__info">
      <div class="top__info__left">
        <p class="top__info__tittle">收货地址</p>
        <div @click="handleAddress">
        <p class="top__info__address">{{data.content.department}}</p>
        <p class="top__info__text">
          <span class="text__name">{{data.content.name}}（先生）</span>
          <span class="text__phone">{{data.content.phone}}</span>
        </p>
        </div>
      </div>
      <div class="top__info__right iconfont" @click="handleAddress">&#xe65e;</div>
    </div>
  </div>
</template>

<script>
import {reactive} from 'vue';
import { useRouter } from "vue-router";
import {get} from '../../utils/post'

const useAddress=()=>{
  const data=reactive({content:{}})
  const getData=async ()=>{
    const result=await get('/api/user/address')
    data.content=result.data[1]
  }
  getData()
  console.log(data)
  return {data}
}
const useHandleBack = () => {
  // 点击“返回”按钮，退回上一页
  const router = useRouter();
  const handleBack = () => {
    router.back();
  };
  return { handleBack };
};
const useHandleAddress = () => {
  const router = useRouter();
  const handleAddress = () => {
    router.push({ name: "MyAddress" });
  };
  return { handleAddress };
};
export default {
  name: "Top",
  setup() {
    const { handleBack } = useHandleBack();
    const { handleAddress } = useHandleAddress();
    const {data}=useAddress()
    return {
      handleBack,
      handleAddress,
      data,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables";
p,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.top {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  box-sizing: border-box;
  padding: 0.25rem 0.18rem 0.16rem;
  height: 1.8rem;
  background-image: linear-gradient(0deg, rgba(0, 145, 255, 0) 4%, #0091ff 50%);
  &__header {
    margin-bottom: 0.22rem;
    height: 0.22rem;
    line-height: 0.22rem;
    font-size: 0.16rem;
    text-align: center;
    color: #fff;
    position: relative;
    &__icon {
      position: absolute;
      left: 0;
    }
  }
  &__info {
    background-color: #fff;
    border-radius: 0.04rem;
    padding: 0.16rem;
    display: flex;
    align-items: center;
    &__right {
      width: 0.1rem;
      height: 0.79rem;
      line-height: 0.79rem;
      font-size: 0.14rem;
      text-align: center;
      transform: rotate(180deg);
    }
    &__left {
      flex: 1;
      .top__info__tittle {
        height: 0.22rem;
        line-height: 0.22rem;
        font-size: 0.16rem;
        color: $content-fontcolor;
        margin-bottom: 0.14rem;
        font-weight: bold;
      }
      .top__info__address {
        font-size: 0.14rem;
        color: $content-fontcolor;
        margin-bottom: 0.06rem;
        height: 0.2rem;
        line-height: 0.2rem;
      }
      .top__info__text {
        height: 0.17rem;
        line-height: 0.17rem;
        font-size: 0.12rem;
        color: #666;
        margin-right: 0.06rem;
      }
    }
  }
}
</style>